<template>
  <div class="in-img" style="height: 800px;">
    <header>
      <!-- Logo -->
      <div class="repair-logo pull-left mar-l3 mar-t66"></div>
      <div class="dropdown in-down-box">
        <button type="button" class="btn btn-bg" id="dropdownMenu1" :class="{ 'btn-blue': dropdownOpen }" @mouseenter="dropdownOpen = true" @mouseleave="dropdownOpen = false">
          <img src="../assets/img/icon04.png" width="12" height="10">
        </button>
        <ul style="width: 180px; height: 145px;" @mouseenter="dropdownOpen = true" @mouseleave="dropdownOpen = false" class="dropdown-menu1 in-downmenu" :class="{ 'fade-in': dropdownOpen, 'fade-out': !dropdownOpen }" aria-labelledby="dropdownMenu1">
          <li><a href="#" class="full-link">数字后勤服务大厅</a></li>
          <li><a href="#" class="full-link">服务监督</a></li>
          <li><a href="#" class="full-link">运驾中心</a></li>
          <li><a href="http://192.168.50.81:5173/" class="full-link">膳食服务</a></li>
        </ul>
      </div>

      <!-- Menu -->
      <div class="pull-left repair-menu">
        <div class="repair-home menu-box">
          <div class="box1 tab-bg" @mouseenter="showRepairHome = true" @mouseleave="showRepairHome = false" :class="{ 'fade-in': showRepairHome, 'fade-out': !showRepairHome }">
            首页<br /><span class="ft12">Home</span>
          </div>
          <div class="icon txt"  @mouseenter="showRepairHome = true" @mouseleave="showRepairHome = false" >
            <img src="../assets/img/icon-home.png" />
          </div>
        </div>
        <div class="repair-notice menu-box">  
          <div class="box1" @click="handleClick" @mouseenter="showRepairNotice = true" @mouseleave="showRepairNotice = false" :class="{ 'fade-in': showRepairNotice, 'fade-out': !showRepairNotice }">通知公告</div>
          <div class="icon" @click="handleClick" @mouseenter="showRepairNotice = true" @mouseleave="showRepairNotice = false">
            <img src="../assets/img/icon-notice.png" />
          </div>
        </div>
        <div class="repair-guide menu-box">
          <div class="box1" @mouseenter="showRepairGuide = true" @mouseleave="showRepairGuide = false" :class="{ 'fade-in': showRepairGuide, 'fade-out': !showRepairGuide }">服务指南</div>
          <div class="icon" @mouseenter="showRepairGuide = true" @mouseleave="showRepairGuide = false">
            <img src="../assets/img/icon-guide.png" />
          </div>
        </div>
        <div class="repair-user menu-box">
          <div class="box1 tab-bg" @mouseenter="showRepairUser = true" @mouseleave="showRepairUser = false" :class="{ 'fade-in': showRepairUser, 'fade-out': !showRepairUser }">用户中心</div>
          <div class="icon txt" @mouseenter="showRepairUser = true" @mouseleave="showRepairUser = false">
            <img src="../assets/img/icon-user.png" />
          </div>
        </div>
      </div>


      <!-- User Login -->
      <div class="user-box in-user-txt">
        <div class="b-login">
          <i></i>
          <a @click="navigateToRoute('/login')">登录</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="#">注册</a>
        </div>
        <div class="a-login hidden">
          <i><img src="../assets/img/temp03.jpg" width="30" height="30" class="img-circle" /></i>
          <a href="#">Chenshangcai</a>&nbsp;&nbsp;&nbsp;
          <a href="#">
            <img src="../assets/img/icon-dope.png" width="20" height="19" />
            <span class="label label-danger">20</span>
          </a>
        </div>
      </div>
    </header>

    <p class="clearfix"></p>

    <div class="in-sidenav">
          <!-- 已有报修 -->
    <div class="menu-box">
      <div class="bg-blue baoxiu box1" @click="baoxiu" @mouseenter="showExistingRepair = true" @mouseleave="showExistingRepair = false" :class="{ 'fade-in': showExistingRepair, 'fade-out': !showExistingRepair }">
        <p><img src="../assets/img/icon01.png"></p>已有报修
      </div>
      <div class="line bg-blue"></div>
    </div>

    <!-- 报修统计 -->
    <div class="menu-box">
      <div class="bg-orange baoxiu box1" @click="baoxiu" @mouseenter="showRepairStats = true" @mouseleave="showRepairStats = false" :class="{ 'fade-in': showRepairStats, 'fade-out': !showRepairStats }">
        <p><img src="../assets/img/icon01.png"></p>报修统计
      </div>
      <div class="line bg-orange"></div>
    </div>

    <!-- 我的报修 -->
    <div class="menu-box">
      <div class="bg-green baoxiu box1" @click="baoxiu" @mouseenter="showMyRepairs = true" @mouseleave="showMyRepairs = false" :class="{ 'fade-in': showMyRepairs, 'fade-out': !showMyRepairs }">
        <p><img src="../assets/img/icon01.png"></p>我的报修
      </div>
      <div class="line bg-green"></div>
    </div>
    </div>
    

    <!-- Text -->
    <div class="in-txt"><img src="../assets/img/in-txt.png" width="400" /></div>

    <!-- Buttons -->
    <div class="in-btn">
      <div class="dropdown pull-left">
        <button type="button" id="dropdownMenu2" data-toggle="dropdown" class="btn btn-green btn-lg" @mouseenter="erweima = true" @mouseleave="erweima = false">
          <img src="../assets/img/code.png" width="26" height="26" />
        </button>
        <ul class="dropdown-menu2 code-menu2" :class="{ 'fade-in': erweima, 'fade-out': !erweima }" aria-labelledby="dropdownMenu2">
          <li><img src="../assets/img/b-code.png" width="108" height="108" alt="" /></li>
          <li>扫码关注公众号</li>
        </ul>
      </div>
      <button type="button" data-toggle="tooltip" @mouseenter="showTooltip1 = true"
      @mouseleave="showTooltip1 = false" title="切换到另一视图窗口" class="btn btn-blue btn-lg">
        <img src="../assets/img/icon-seitch.png" width="25" height="19" />
      </button>
      <button type="button" @click="woyaobaoxiu" data-toggle="tooltip" @mouseenter="showTooltip2 = true"
      @mouseleave="showTooltip2 = false" title="进入报修页面" class="btn btn-orange btn-lg ft18">
        <img src="../assets/img/icon-edit.png" />
        &nbsp;&nbsp;我要报修
      </button>
    </div>

    <!-- Footer -->
    <p class="clearfix"></p>
    <footer>
      <div class="footer">
        <div class="ft14 pull-left">
          <a href="#" class="link ft18">数字后勤服务大厅</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">运驾中心</a> -
          <a href="#">服务监督</a> - <a href="#">膳食服务</a>
        </div>
        <div class="ft12 pull-left txt">
          <p>版权所有：西南大学资产经营公司 (渝ICP 06005063号)</p>
          <p>重庆市北碚区天生路2号 邮编：400715</p>
        </div>
      </div>
    </footer> 
  </div>
</template>

<script>
import '@/assets/css/index.css'
import '@/assets/css/style.css'
import '@/assets/css/bootstrap.css'
import { useRouter } from 'vue-router';
import { ElMessage } from "element-plus";

export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      dropdownOpen: false,
      showExistingRepair: false,  // 控制已有报修的可见性
      showRepairStats: false,      // 控制报修统计的可见性
      showMyRepairs: false,        // 控制我的报修的可见性
      showRepairHome: false,
      showRepairNotice: false,
      showRepairGuide: false,
      showRepairUser: false,
      erweima:false,
      showTooltip1: false, // 控制按钮1的提示信息显示
      showTooltip2: false, // 控制按钮2的提示信息显示
    };
  },
  setup() {
    const handleClick = () => {
      const roleName = localStorage.getItem('roleName'); // 从本地存储中获取 roleId
      if (roleName === '管理员') {
        router.push('/notice-admin');
      } else {
        router.push('/notice-list');
      }
    };
    const baoxiu = () => {
      const roleName = localStorage.getItem('roleName'); // 从本地存储中获取 roleId
      if (roleName === '管理员') {
        router.push('/repair-list-admin');
      } else if(roleName === '学生'){
        router.push('/repair-list-user');
      } else if(roleName === '维修员'){
        router.push('/repair-list-worker');
      } else {
        ElMessage.error('请先登录！');
      }
    };
    const woyaobaoxiu = () => {
      const roleName = localStorage.getItem('roleName'); // 从本地存储中获取 roleId
      if (roleName === '学生') {
        router.push('/new-repair');
      } else {
        ElMessage.error('您不是用户，无法报修');
      }
    }
    const router = useRouter();
    const navigateToRoute = (url) => {
      router.push(url); // 替换为你想跳转的路由路径
    };

    return {
      navigateToRoute,
      handleClick,
      baoxiu,
      woyaobaoxiu,
    };
  },
};
</script>

<style scoped>
</style>